<template>
	<view class="jq-keyboard">
		<view class="left">
			<view v-for="(item,index) in vdata.number" :key="index" @click="change(item)" 
				class="common" hover-class="hover" :hover-stay-time="150">
				{{ item }}
			</view>
			<view @click="change('0')" class="common zero" hover-class="hover" :hover-stay-time="150">0</view>
			<view @click="change('.')" class="common" hover-class="hover" :hover-stay-time="150">.</view>
		</view>
		<view class="right">
			<view class="common del" hover-class="hover" :hover-stay-time="150" @click="del">
				<image src="../../static/indexImg/clear.svg"></image>
			</view>
			<view 
				class="common scan"
				:hover-stay-time="150"
				@click="scan"
				:hover-class="{'pay-amount': !btnMark}"
				>
				<image src="../../static/indexImg/scan.svg" mode=""></image>
				扫一扫
				<view v-show="btnMark" class="mark" @click.stop="empty"></view>
			</view>
			<view
				class="common code"
				:hover-stay-time="150"
				:hover-class="{'pay-amount': !btnMark}"
				@click="pay">
				<image src="../../static/indexImg/code-light.svg" mode=""></image>
				聚合码
				<view v-show="btnMark" class="mark" @click.stop="empty"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive, onMounted, getCurrentInstance } from 'vue'

	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties

	const props = defineProps({
		btnMark: {type: Boolean, default: false}
	})
	const vdata = reactive({
		number: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
		value: '0'
	})
	const emit = defineEmits(['scan', 'pay', 'change'])
	
	function change(k) {
		
		let currentVal = vdata.value
		if(currentVal === '0' && k != '.') {
			currentVal = k
		}else {
			currentVal += k;
		}
		
		if(!matchNum(currentVal)) {
			return
		}
		vdata.value = currentVal
		emit('change', vdata.value)
	}
	function del() {

		let currentVal = vdata.value
		if(!currentVal || currentVal.length <= 1) {
			vdata.value = '0'
		}else {
			vdata.value = vdata.value.substring(0, currentVal.length - 1)
		}
		
		emit('change', vdata.value)
	}
	
	function matchNum(currentVal) {
		const pattern = /^(([1-9]{1}\d{0,5})|(0{1}))(\.\d{0,2})?$/
		return pattern.test(currentVal)
	}
	function pay() {
		emit('pay')
	}
	function scan() {
		emit('scan')
	}
	function setValue(value) {
		vdata.value = value
	}
	
	defineExpose({ setValue })
	
	function empty() {
		$infoBox.toast('请输入收款金额')
	}
</script>

<style lang="scss">
	.jq-keyboard {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding: 0 5rpx;
		box-sizing: border-box;
		
		.left {
			width: 75%;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-around;
		}
		.right {
			width: 25%;
			margin-left: 5rpx;
			margin-right: 5rpx;
		}
	}
	.common {
		width: calc(100%/3 - 10rpx);
		height: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		margin-bottom: 10rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		font-size: 55rpx;
		letter-spacing: 0.04em;
		background: #f5f6f7;
		color: $uni-text-color;
	}
	.zero {
		width: calc(100%/3*2 - 10rpx);
	}
	.del {
		width: 100%;
		image {
			width: 51rpx;
			height: 37rpx;
		}
	}
	.scan, .code {
		width: 100%;
		height: 230rpx;
		font-size: 26rpx;
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: cener;
		background-color: #0041c4;
		position: relative;
		image {
			width: 60rpx;
			height: 60rpx;
			margin-bottom: 10rpx;
		}
		.mark {
			position: absolute;
			background-color: #fff;
			opacity: 0.5;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
		}
	}
	.scanShow {
		height: 470rpx;
	}
	.hover:hover {
		background: #dadfeb;
	}
	.pay-amount {
		filter: brightness(70%)
	}
</style>
